import React, { useState, useEffect } from 'react';
import './index.less';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';

const config = [
  {
    name: '综合结算',
    tips: '本项由“中长期收入”，“现货收入”，“回收费用”，“考核费用”共同计算得到，其中“回收”与“考核”为减项',
    totalKey: 'comprehensiveDiff',
    beforeStrategyKey: 'comprehensiveBefore',
    beforeSmoothKey: 'comprehensiveBefore',
    afterStrategyKey: 'comprehensiveAfter',
    afterSmoothKey: 'comprehensiveAfter',
  },
  {
    name: '中长期收入',
    tips: '本项为“基数合约收入”与“中长期合约收入”的总和，反映调节前后中长期的整体收入变动',
    totalKey: 'mediumDiff',
    beforeStrategyKey: 'mediumBefore',
    beforeSmoothKey: 'mediumBefore',
    afterStrategyKey: 'mediumAfter',
    afterSmoothKey: 'mediumAfter',
  },
  {
    name: '现货收入',
    tips: '本项为“日前结算收入”与“实时结算收入”的总和，反映调节前后现货市场的整体收入变动',
    totalKey: 'spotDiff',
    beforeStrategyKey: 'spotBefore',
    beforeSmoothKey: 'spotBefore',
    afterStrategyKey: 'spotAfter',
    afterSmoothKey: 'spotAfter',
  },
  {
    name: '回收费用',
    tips: '本项为“现货超额获利回收”与“中长期超额回收”的总和，反映调节前后回收费用的整体变动。回收为减项，数值越大代表收益越差',
    totalKey: 'recoveryDiff',
    beforeStrategyKey: 'recoveryBefore',
    beforeSmoothKey: 'recoveryBefore',
    afterStrategyKey: 'recoveryAfter',
    afterSmoothKey: 'recoveryAfter',
  },
  {
    name: '考核费用',
    tips: '本项为“预测精度考核费用”与“绝对误差考核费用”的总和，反映调节前后偏差考核费用的整体变动。考核为减项，数值越大代表收益越差',
    totalKey: 'assessmentDiff',
    beforeStrategyKey: 'assessmentBefore',
    beforeSmoothKey: 'assessmentBefore',
    afterStrategyKey: 'assessmentAfter',
    afterSmoothKey: 'assessmentAfter',
  },
];

const BoardContent: React.FC<IBoardContentProps> = (props) => {
  const [strategy, setStrategy] = useState<any>({});
  const [smooth, setSmooth] = useState<any>({});

  useEffect(() => {
    if (props.data && props.data.smooth && props.data.strategy) {
      setStrategy(props.data.strategy);
      setSmooth(props.data.smooth);
    }
  }, [props.data]);

  return (
    <div className="board-content">
      {config.map((v, i) => {
        return (
          <div className="board-item" key={v.totalKey}>
            {i !== 0 && <div className="divider" />}

            <div className="bl">
              <div className="name">
                {v.name}
                <span className="icon">
                  <Tooltip title={v.tips}>
                    <QuestionCircleOutlined />
                  </Tooltip>
                </span>
              </div>
              <div className="total">
                {props.strategyType === '1' && (strategy[v.totalKey] ? strategy[v.totalKey] : 0)}
                {props.strategyType === '2' && (smooth[v.totalKey] ? smooth[v.totalKey] : 0)}
                <span className="unit">万元</span>
              </div>
            </div>
            <div className="br">
              <div className="before">
                <div>调节前</div>
                {props.strategyType === '1' && (
                  <div className="val">
                    {strategy[v.beforeStrategyKey] ? strategy[v.beforeStrategyKey] : 0}
                  </div>
                )}
                {props.strategyType === '2' && (
                  <div className="val">
                    {smooth[v.beforeSmoothKey] ? smooth[v.beforeSmoothKey] : 0}
                  </div>
                )}

                {/* <div>
                  策略版：
                  <span className="val">
                    {strategy[v.beforeStrategyKey] ? strategy[v.beforeStrategyKey] : 0}
                  </span>
                </div>
                <div>
                  平滑版：
                  <span className="val">
                    {smooth[v.beforeSmoothKey] ? smooth[v.beforeSmoothKey] : 0}
                  </span>
                </div> */}
              </div>
              <div className="after">
                <div>调节后</div>
                {props.strategyType === '1' && (
                  <div className="val">
                    {strategy[v.afterStrategyKey] ? strategy[v.afterStrategyKey] : 0}
                  </div>
                )}
                {props.strategyType === '2' && (
                  <div className="val">
                    {smooth[v.afterSmoothKey] ? smooth[v.afterSmoothKey] : 0}
                  </div>
                )}
                {/* <div>
                  策略版：
                  <span className="val">
                    {strategy[v.afterStrategyKey] ? strategy[v.afterStrategyKey] : 0}
                  </span>
                </div>
                <div>
                  平滑版：
                  <span className="val">
                    {smooth[v.afterSmoothKey] ? smooth[v.afterSmoothKey] : 0}
                  </span>
                </div> */}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

interface IBoardContentProps {
  data: {
    // 策略版
    strategy: any;
    // 平滑版
    smooth: any;
  };
  strategyType: '1' | '2';
}

export default BoardContent;
